<template>
<div>
  <loading v-if="!rungroup"/>
  <div class="rungroup" v-if="rungroup">
    <header class="header">
        <div class="name">
            <b>{{rungroup.name}}</b>
            <p class="start">
                <rater v-model="rungroup.stars" :font-size="16" disabled></rater>
            </p>
        </div>
        <!-- <div class="actions">
            <span><i class="iconfont qrcode">&#xe603;</i></span>
            <span>
          <i class="iconfont heart" v-if="true">&#xe693;</i>
          <i class="iconfont heart" v-else>&#xe8cf;</i>
          {{rungroup.totalPraise}}
        </span>
        </div> -->
    </header>
    <section class="cnt">
        <div class="introduce">
            {{rungroup.introduce | substr}} 
            <!-- <span class="link">更多 ></span> -->
        </div>
        <div class="banner">
            <div class="pic">
                <img :src="rungroup.imageUrl" alt="">
            </div>
            <div class="data">
                <div class="info">
                    <p><i class="iconfont">&#xe62b;</i>{{rungroup.monthMileage || 0}}KM</p>
                    <p><i class="iconfont">&#xe60b;</i>{{rungroup.points || 0}}个</p>
                    <p><i class="iconfont">&#xe61c;</i>{{rungroup.totalMember || 1}}人</p>
                </div>
                <div v-if="photoArr[1]">
                  <img :src="photoArr[1].imageUrl" alt="">
                </div> 
            </div>
        </div>
        <div class="userinfo">
            <div class="user">
                <div class="pic">
                  <span v-if="rungroup.champion.imageUrl">
                    <img :src="rungroup.champion.imageUrl" alt="">
                  </span>
                  <span v-else>
                    <img src="@/assets/images/male.png" alt="" v-if="rungroup.champion.sex===0">
                    <img src="@/assets/images/female.png" alt="" v-if="rungroup.champion.sex===1">
                  </span>
                </div>
                <div class="info">
                    <b class="name">{{rungroup.champion.nickName}}</b>
                    <p class="distance">{{rungroup.champion.finish}}KM <span>本周冠军</span></p>
                </div>
            </div>
            <div class="action">
                <button type="button" @click="join"  v-if="rungroup.isJoin === 0">申请加入跑团</button>
                <span class="sta" v-else>已加入跑团</span>
            </div>
        </div>
        <div>
        </div>
        <div class="tab-box" ref="tabox">
            <div class="tab-bar">
                <div class="menu" :class="{'fixed': isFixed}">
                    <tab :line-width="1" :scroll-threshold="6">
                        <tab-item  selected @on-item-click="onItemClick"><i class="iconfont">&#xe626;</i> 动态</tab-item>
                        <!-- <tab-item @on-item-click="onItemClick"><i class="iconfont">&#xe600;</i>位置</tab-item> -->
                        <tab-item @on-item-click="onItemClick"><i class="iconfont">&#xe61c;</i> 成员</tab-item>
                        <tab-item @on-item-click="onItemClick"><i class="iconfont">&#xe6c5;</i> 排行</tab-item>
                        <tab-item @on-item-click="onItemClick"><i class="iconfont">&#xe6a1;</i> 活动</tab-item>
                        <tab-item @on-item-click="onItemClick"><i class="iconfont">&#xe601;</i> 训练</tab-item>
                    </tab>
                </div>
            </div>
            <div class="tab-cnt">
                <div class="dynamic" v-show="tabIndex===0">
                    <div class="report">
                        <div class="link">
                            <span class="title">统计</span>
                            <span class="linkurl" @click="common.download">年报表 ></span>
                        </div>
                        <div class="chart" @click="common.download">
                            <div class="week">
                                <img src="@/assets/images/pro.png" alt="" :style="{'transform': `rotate(${rotate(1)}deg)`}">
                                <p class="data">{{rungroup.dynamic.war}}KM</p>
                                <p class="tips">本周跑团跑量</p>
                            </div>
                            <div class="card">
                                <p class="data">{{rungroup.dynamic.was}}人</p>
                                <p class="tips">本周打卡</p>
                            </div>
                            <div class="average">
                                <img src="@/assets/images/pro.png" alt="" :style="{'transform': `rotate(${rotate(2)}deg)`}">
                                <p class="data">{{rungroup.dynamic.tapr}}KM</p>
                                <p class="tips">周人均跑量</p>
                            </div>
                        </div>
                    </div>
                    <div class="list">
                        <div class="title">本周打卡明细</div>
                        <div class="list-item" v-for="(item,index) in signArr" :key="index">
                            <div class="user">
                                <div class="pic">
                                    <img :src="item.imageUrl" alt="" v-if="item.imageUrl">
                                    <img src="@/assets/images/male.png" alt="" v-if="!item.imageUrl && item.sex===0">
                                    <img src="@/assets/images/female.png" alt="" v-if="!item.imageUrl && item.sex===1">
                                    <span>{{item.nickName}}</span>
                                </div>
                                <!-- <div class="action">
                                    <span class="follow">关注</span>
                                    <span class="like"><i class="iconfont">&#xe6a2;</i> 16</span>
                                </div> -->
                            </div>
                            <div class="time">
                                {{(item.time * 1000) | formatTime}} <span>完成了一次跑步</span>
                            </div>
                            <div class="info" @click="goRun(item)">
                                <div class="mileage">
                                    <p class="data"><b>{{item.mileage}}</b><span>公里</span></p>
                                    <span class="tips">里程</span>
                                </div>
                                <div class="speed">
                                    <p class="data"><b>{{item.avgPace | formatSecond(1)}}</b><span>/公里</span></p>
                                    <span class="tips">配速</span>
                                </div>
                                <div class="timer">
                                    <p class="data"><b>{{item.duration | formatSecond(2)}}</b></p>
                                    <span class="tips">时间</span>
                                </div>
                            </div>
                        </div>
                        <div class="nomore" v-if="signArr.length === total && signArr.length > 0">没有更多了</div>
                        <div class="nodata" v-if="signArr.length === 0">
                            <img src="@/assets/images/nodata.png" alt="">
                            <p class="tips">本周没有人打卡</p>
                        </div>
                    </div>
                </div>
                <!-- <div class="address" v-show="tabIndex===1">
                    <div id="container" class="map-box"></div>
                </div> -->
                <div class="members" v-show="tabIndex===1">
                    <div class="title" v-show="role.role1.length > 0">服务人员</div>
                    <div class="manager" v-if="role.role1.length > 0">
                        <div class="item" v-for="(item,index) in role.role1" :key="index" @click="goShare(item)">
                            <div class="info">
                                <img :src="item.imageUrl" alt="" v-if="item.imageUrl">
                                <img src="@/assets/images/male.png" alt="" v-if="!item.imageUrl&&item.sex===0">
                                <img src="@/assets/images/female.png" alt="" v-if="!item.imageUrl&&item.sex===1">
                                <p class="name">{{item.nickName}} <span>{{item.role | formatRole}}</span></p>
                                <p class="times">本周运动：{{item.weekTimes}}次</p>
                            </div>
                            <div class="data">
                                <p class="sign-in">活动签到：{{item.totalSign}}次</p>
                                <p class="sign-up">报名：{{item.totalJoin}}次</p>
                                <p class="mailage">本周{{item.totalMileage}}公里</p>
                            </div>
                            <!-- <div class="action">
                                <i class="iconfont">&#xe6a8;</i>
                            </div> -->
                        </div>
                    </div>
                    <div class="title"  v-show="role.role2.length > 0">团成员</div>
                    <div class="members" v-if="role.role2.length > 0">
                        <div class="item" v-for="(item,index) in role.role2" :key="index" @click="goShare(item)">
                            <div class="info">
                                <img :src="item.imageUrl" alt="" v-if="item.imageUrl">
                                <img src="@/assets/images/male.png" alt="" v-if="!item.imageUrl&&item.sex===0">
                                <img src="@/assets/images/female.png" alt="" v-if="!item.imageUrl&&item.sex===1">
                                <p class="name">{{item.nickName}} <span>成员</span></p>
                                <p class="times">本周运动: {{item.weekTimes}}次</p>
                            </div>
                            <div class="data">
                                <p class="sign-in">活动签到：{{item.totalSign}}次</p>
                                <p class="sign-up">报名：{{item.totalJoin}}次</p>
                                <p class="mailage">本周{{item.totalMileage}}公里</p>
                            </div>
                        </div>
                    </div>
                    <div class="nomore" v-if="members.length === total && members.length > 0">没有更多了</div>
                </div>
                <div class="rank" v-show="tabIndex===2">
                    <div class="title">
                        <span class="text">当前周排行</span>
                        <span class="more" @click="common.download">更多排行 ></span>
                    </div>
                    <div class="rank-box">
                        <div class="item" v-for="(item,index) in rankArr" :key="index">
                            <div class="pic">
                                <span class="range">
                                  <img src="@/assets/images/rank1.png" alt="" v-if="item.rank === 1">
                                  <img src="@/assets/images/rank2.png" alt="" v-if="item.rank === 2">
                                  <img src="@/assets/images/rank3.png" alt="" v-if="item.rank === 3">
                                  <label for="" v-if="item.rank >3">{{item.rank}}</label>
                                </span>
                                <img class="user"  :src="item.imageUrl" alt="" v-if="item.imageUrl">
                                <img class="user"  src="@/assets/images/male.png" alt="" v-if="!item.imageUrl&&item.sex===0">
                                <img class="user"  src="@/assets/images/female.png" alt="" v-if="!item.imageUrl&&item.sex===1">
                            </div>
                            <div class="progress">
                                <p class="name">{{item.nickName}}</p>
                                <p class="bar">
                                    <x-progress :percent="item.finish/rungroup.champion.finish*100" :show-cancel="false"></x-progress>
                                </p>
                            </div>
                            <div class="mailage">{{item.finish}}公里</div>
                        </div>
                        <div class="nomore" v-if="rankArr.length === total && rankArr.length > 0">没有更多了</div>
                    </div>
                </div>
                <div class="activity" v-show="tabIndex===3">
                    <div class="item vux-1px-b" v-for="(item,index) in activityArr" :key='index' @click="goActivity(item)">
                        <div class="pic">
                            <img :src="item.coverImg" alt="">
                        </div>
                        <div class="info">
                            <p class="title">{{item.address}}</p>
                            <p class="status" :class="{'over': item.status === 2 || item.status === 3}"><span>{{item.status | formatStatus}}</span></p>
                            <p class="time">时间：{{item.startTime | formatT}} - {{item.endTime | formatT}}</p>
                        </div>
                    </div>
                    <div class="nomore" v-if="activityArr.length === total && activityArr.length > 0">没有更多了</div>
                    <div class="nodata" v-if="activityArr.length === 0">
                        <img src="@/assets/images/nodata.png" alt="">
                        <p class="tips">当前没有活动</p>
                    </div>
                </div>
                <div class="train" v-show="tabIndex===4">
                    <div class="item vux-1px-b" v-for="(item,index) in trainArr" :key="index" @click="goTrain(item)">
                        <div class="pic">
                            <img :src="item.imageUrl" alt="">
                        </div>
                        <div class="info">
                            <p class="title">{{item.name}}</p>
                            <p class="data">{{item.mileage}}KM / {{item.days}}天 / {{item.signNum}}次打卡</p>
                            <p class="status" :class="{'over': trainStatus(item) !=='进行中'}"><span>{{trainStatus(item)}}</span></p>
                        </div>
                    </div>
                    <div class="nomore" v-if="trainArr.length === total && trainArr.length > 0">没有更多了</div>
                    <div class="nodata" v-if="trainArr.length === 0">
                        <img src="@/assets/images/nodata.png" alt="">
                        <p class="tips">当前没有团训练</p>
                    </div>
                </div>
                <div infinite-wrapper>
                  <infinite-loading @infinite="infiniteAction"  ref="infiniteLoading">
                    <span slot="no-more"></span>
                    <span slot="no-results"></span>
                  </infinite-loading>
                </div>
            </div>
        </div>
    </section>
    <download />
  </div>
</div>
</template>

<script>
import api from '@/api/rungroup'
import { Rater, Tab, TabItem, XProgress } from 'vux'
import InfiniteLoading from 'vue-infinite-loading'
import Download from '@/components/download'
import Loading from '@/components/loading'
import axios from 'axios'
export default {
  components: {
    Rater,
    Tab,
    TabItem,
    XProgress,
    InfiniteLoading,
    Download,
    Loading
  },
  data () {
    return {
      groupId: '',
      userId: '',
      rungroup: null,
      members: [],
      isFixed: false, // 菜单是否固定
      tabIndex: 0, //  tab切换
      pageIndex: 1,
      offset: 10,
      total: '',
      lastPage: false,
      rankArr: [],
      activityArr: [],
      trainArr: [],
      photoArr: [],
      signArr: []
    }
  },
  watch: {
    $route (to, from) {
      if (this.$route.query.token) {
        let token = this.$route.query.token
        window.localStorage.setItem('token', token)
        axios.defaults.headers.common['Authorization'] = token
        this.getData()
        this.photo()
      }
    }
  },
  computed: {
    role () {
      if (this.members.length === 0) {
        return {
          role1: [],
          role2: []
        }
      } else {
        let role1 = []
        let role2 = []
        this.members.forEach(el => {
          if (el.role === 2) {
            role2.push(el)
          } else if ([0, 1, 4, 5].includes(el.role)) {
            role1.push(el)
          }
        })
        return {
          role1: role1,
          role2: role2
        }
      }
    }
  },
  filters: {
    substr (val) {
      let num = String(val).length
      return num > 50 ? (String(val).substring(0, 50) + '...') : String(val)
    },
    formatRole (val) {
      let role = {
        '-1': '已退团',
        '0': '团长',
        '1': '副团长',
        '2': '团员',
        '3': '非团成员',
        '4': '秘书长',
        '5': '名誉团长'
      }
      return role[val]
    },
    formatStatus (val) {
      let status = {
        0: '报名中',
        1: '活动进行中',
        2: '已截止报名',
        3: '活动已结束'
      }
      return status[val]
    },
    formatT (val) {
      if (!val) {
        return ''
      }
      return val.split(' ')[0].replace(/-/g, '.')
    },
    formatSecond (val, type) {
      if (!val) return '--'
      let h = parseInt(val / 3600, 10)
      let m = parseInt((val - 3600 * h) / 60, 10)
      let s = val - m * 60 - h * 3600
      if (type === 1) {
        m = m >= 10 ? m : '0' + m
        s = s >= 10 ? s : '0' + s
        return `${m}'${s}"`
      } else if (type === 2) {
        h = h >= 10 ? h : '0' + h
        m = m >= 10 ? m : '0' + m
        s = s >= 10 ? s : '0' + s
        return `${h}:${m}:${s}`
      }
    }
  },
  created () {
    if (!this.$route.query.token) {
      this.common.wechatlogin()
    } else {
      let token = this.$route.query.token
      window.localStorage.setItem('token', token)
      axios.defaults.headers.common['Authorization'] = token
      this.getData()
      this.photo()
    }
  },
  methods: {
    // 去个人分享
    goShare (item) {
      this.$router.push({path: '/share', query: {userId: item.userId, showBar: 'no'}})
    },
    // 跑团详情
    getDetail () {
      api.getDetail({groupId: this.groupId}).then((res) => {
        if (res.data.code === 200) {
          this.rungroup = res.data.data
        } else if (res.data.code === 313) {
          window.location.reload()
        } else {
          this.$vux.toast.text('获取跑团详情失败！', 'center')
        }
      }).catch()
    },
    // 跑团成员
    getMembers ($state) {
      api.getMembers({
        type: 0,
        groupId: this.groupId,
        pageIndex: this.pageIndex,
        offset: this.offset
      }).then((res) => {
        if (res.data.code === 200) {
          this.pageIndex += 1
          this.total = res.data.data.total
          this.members.push(...res.data.data.list)
          $state.loaded()
          if (this.total <= this.members.length) {
            $state.complete()
          }
        } else {
          $state.complete()
        }
      }).catch()
    },
    // 加入跑团
    join () {
      api.join({groupId: this.groupId, operation: 0}).then((res) => {
        if (res.data.code === 200) {
          this.getDetail()
          this.$vux.toast.text('加入跑团成功！', 'center')
        } else {
          this.$vux.toast.text('加入跑团失败！', 'center')
        }
      }).catch()
    },
    // 跑团成员排行榜
    rank ($state) {
      if (this.lastPage) {
        $state.complete()
        return false
      }
      api.rank({
        userId: this.userId,
        groupId: this.groupId,
        pageIndex: this.pageIndex,
        offset: this.offset,
        type: 1
      }).then((res) => {
        if (res.data.code === 200) {
          this.pageIndex += 1
          this.total = res.data.data.total
          this.rankArr.push(...res.data.data.list)
          $state.loaded()
          if (this.total <= this.rankArr.length) {
            $state.complete()
          }
        } else {
          $state.complete()
        }
      }).catch()
    },
    // 跑团活动
    activity ($state) {
      api.activity({groupId: this.groupId, pageIndex: this.pageIndex, offset: this.offset}).then((res) => {
        if (res.data.code === 200) {
          this.pageIndex += 1
          this.total = res.data.data.total
          this.activityArr.push(...res.data.data.list)
          $state.loaded()
          if (this.total <= this.activityArr.length) {
            $state.complete()
          }
        } else {
          $state.complete()
        }
      }).catch()
    },
    // 训练计划
    list ($state) {
      api.list({userId: this.userId, groupId: this.groupId, pageIndex: this.pageIndex, offset: this.offset}).then((res) => {
        if (res.data.code === 200) {
          this.pageIndex += 1
          this.total = res.data.data.total
          this.trainArr.push(...res.data.data.list)
          $state.loaded()
          if (this.total <= this.trainArr.length) {
            $state.complete()
          }
        } else {
          $state.complete()
        }
      }).catch()
    },
    // 跑团明细
    sign ($state) {
      api.sign({
        userId: this.userId,
        groupId: this.groupId,
        pageIndex: this.pageIndex,
        offset: this.offset
      }).then((res) => {
        if (res.data.code === 200) {
          this.pageIndex += 1
          this.total = res.data.data.total
          this.signArr.push(...res.data.data.list)
          $state.loaded()
          if (this.total <= this.signArr.length) {
            $state.complete()
          }
        } else {
          $state.complete()
        }
      }).catch()
    },
    // 进入活动详情
    goActivity (item) {
      window.location.href = process.env.BASE_URL + 'tc-share-wxactivity.html?activityId=' + item.activityId
    },
    // 进入训练详情
    goTrain (item) {
      window.location.href = process.env.BASE_URL + 'dist/rungroup/traindes.html?groupId=' + item.groupId + '&trainId=' + item.trainId + '&userId=' + this.userId
    },
    // 进入跑步详情
    goRun (item) {
      let str = 'recordId=' + item.recordId + '&hideMap=0'
      let code = this.common.encrypt(str, 'odunSmar').value
      let url = process.env.BASE_URL === 'http://test.odun.com/' ? 'http://wx.odun.com' : 'http://share.odun.com'
      window.location.href = url + '#/run?' + code
    },
    // 训练状态
    trainStatus (item) {
      let start = item.startTime * 1000
      let end = item.endTime * 1000
      let date = new Date().getTime()
      return date < start ? '未开始' : (date < end ? '进行中' : '已结束')
    },
    // 计算旋转角度
    rotate (type) {
      let num = 0
      if (type === 1) {
        num = this.rungroup.dynamic.war / this.rungroup.dynamic.wtr
      } else {
        num = this.rungroup.dynamic.tapr / this.rungroup.dynamic.tar
      }
      num = num <= 1 ? num : 1
      return parseInt(num * 250, 10)
    },
    // 跑团相册
    photo () {
      api.photo({userId: this.userId, groupId: this.groupId, pageIndex: 1, offset: 5})
      .then((res) => {
        if (res.data.code === 200) {
          this.photoArr = res.data.data.list
        }
      }).catch()
    },
    // tab切换
    onItemClick (index) {
      if (index === 0) {
        this.signArr = []
      }
      if (index === 1) {
        this.members = []
      }
      if (index === 2) {
        this.rankArr = []
      }
      if (index === 3) {
        this.activityArr = []
      }
      if (index === 4) {
        this.trainArr = []
      }
      this.pageIndex = 1
      this.total = ''
      this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset')
      this.tabIndex = index
    },
    // 加载更多
    infiniteAction ($status) {
      if (this.tabIndex === 0) {
        this.sign($status)
      } else if (this.tabIndex === 1) {
        this.getMembers($status)
      } else if (this.tabIndex === 2) {
        this.rank($status)
      } else if (this.tabIndex === 3) {
        this.activity($status)
      } else if (this.tabIndex === 4) {
        this.list($status)
      } else {
        return ''
      }
    },
    // 初始化高德地图
    // initMap () {
    //   var la = this.rungroup.la
    //   var lo = this.rungroup.lo
    //   /* eslint-disable */
    //   var map = new AMap.Map('container', {
    //     dragEnable: false,
    //     zoomEnable: false,
    //     resizeEnable: false,
    //     center: [lo, la],
    //     zoom: 14
    //   })
    //   var marker = new AMap.Marker({
    //       position: new AMap.LngLat(lo, la)
    //       // icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png'
    //   })
    //   map.add(marker)
    //   map.setCenter([lo, la])
    // },
    // 授权后获取数据、参数
    getData () {
      this.groupId = this.$route.query.groupId || ''
      this.userId = this.$route.query.userId || ''
      this.getDetail()
    },
    // 滚动事件
    handleScroll () {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop > 380) {
        this.isFixed = true
      } else {
        this.isFixed = false
      }
    }
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll) // 监听滚动事件
  }
}
</script>

<style lang="scss" scoped>
.rungroup{
  padding: 2rem 1rem;
  background: #fff;
  .nomore{
    text-align: center;
    font-size: 1rem;
    padding-top: 2rem;
    color: #999;
  }
  .nodata{
    text-align: center;
    font-size: 1.2rem;
    img{
      margin-top: 2rem;
    }
    .tips{
      color: #999;
      padding-top: 0.5rem;
      padding-left: 1rem;
    }
  }
  .header{
    display: flex;
    padding-bottom: 1rem;
    .name{
      font-size: 1.6rem;
      color: #262628;
      width: 50%;
    }
    .actions{
      flex: 1;
      text-align: right;
      color: #929292;
      i{
        font-size: 2rem;
        margin-left: 0.6rem;
      }
      .qrcode{
        font-size: 2.2rem;
      }
    }
  }
  .cnt{
    .introduce{
      padding-bottom: 0.8rem;
      color: #999;
      line-height: 1.4;
      font-size: 1.4rem;
      // text-indent: 2rem;
      .link{
        color: #5697e4;
        margin-left: 0.5rem;
      }
    }
    .banner{
      margin-top: 0.5rem;
      overflow: hidden;
      .pic{
        float: left;
        width: 55%;
        height: 20rem;
        img{
          width: 100%;
          height: 100%;
          border-radius: 4px;
        }
      }
      .data{
        float: right;
        width: 40%;
        .info{
          height: 10rem;
          color: #9B9B9B;
          font-size: 1.4rem;
          padding-left: 2rem;
          i{
            margin-right: 0.5rem;
            font-size: 2rem;
          }
          p{
            padding-bottom: 1.5rem;
          }
        }
        img{
          width: 14rem;
          height: 10rem;
          border-radius: 4px;
        }
      }
    }
    .userinfo{
      display: flex;
      padding: 1rem 0;
      .user{
        width: 70%;
        display: flex;
        .pic{
          width: 5rem;
          padding-top: 1.5rem;
          background: url('../../assets/images/huang.png') top center no-repeat;
          overflow: hidden;
          margin-right: 0.5rem;
           img{
             width: 5rem;
             height: 5rem;
             border-radius: 50%;
             border:3px solid #E7BD2A;
           }
        }
        .info{
          padding-top: 2rem;
          .name{
            color: #4A4A4A;
          }
          .distance{
            font-size: 1.4rem;
            color: #666;
            padding-top: 0.5rem;
            span{
              font-size: 1rem;
              display: inline-block;
              margin-left: 0.5rem;
              background-color: #f5a623;
              color: #fff;
              padding: 3px 0.5rem 1px;
              border-radius: 3px;
            }
          }
        }
      }
      .action{
        flex: 1;
        padding-top: 2.2rem;
        button{
          background-color: #0cae6c;
          color: #fff;
          padding: 0.8rem 1rem;
          border: none;
          border-radius: 3px;
        }
        .sta{
          display: block;
          line-height: 3rem;
          font-size: 1.2rem;
          text-align: right;
          color: #999;
        }
      }
    }
    .tab-box{
      min-height: 40rem;
      .tab-bar{
        height: 46px;
        overflow-x: auto;
        background-color: #fff;
        z-index: 5;
        .menu{
          // width: 130%;
          width: 100%;
        }
      }
      .fixed{
        position: fixed;
        top: 0;
        left: 0;
        overflow-x: scroll;
        overflow-y: hidden;
        width: 100%;
        .vux-tab-wrap{
          // width: 130%;
          width: 100%;
        }
      }
      .tab-cnt{
        padding: 1rem 0;
        min-height: 40rem;
        .dynamic{
          .link{
            display: flex;
            font-size: 1.4rem;
            padding: 1rem 0;
            .title{
              color: #333;
            }
            .linkurl{
              flex: 1;
              text-align: right;
              color: #666;
            }
          }
          .chart{
            display: flex;
            .week,.card,.average{
              flex: 1;
              height: 10rem;
              font-size: 1.2rem;
              text-align: center;
              line-height: 1.4;
              color: #333;
              img{
                margin-top: 3.2rem;
                transform:rotate(0deg)
              }
            }
            .week,.average{
             background: url('../../assets/images/progress1.png')  center 1.2rem no-repeat;
             .data{
               padding-top: 1.2rem;
             }
             .tips{
               color: #999;
             }
            }
            .card{
              background: url('../../assets/images/progress2.png') top center no-repeat;
              .data{
                padding-top: 3rem;
              }
              .tips{
                padding-top: 3.4rem;
                color: #999;
              }
            }
          }
          .list{
            padding: 2rem 0;
            overflow: hidden;
            .title{
              font-size: 1.4rem;
              padding-bottom: 2rem;
            }
            .list-item{
              margin-bottom: 2rem;
              .user{
                display: flex;
                .pic{
                  width: 50%;
                  vertical-align: middle;
                  img{
                    width: 4rem;
                    height: 4rem;
                    border-radius: 50%;
                    vertical-align: middle;
                  }
                  span{
                    font-weight: bold;
                  }
                }
                .action{
                  flex: 1;
                  text-align: right;
                  span{
                    display: inline-block;
                    line-height: 1.6rem;
                    padding: 2px 1rem;
                    border-radius: 1rem;
                    border: 1px solid #ccc;
                    margin-left: 1rem;
                    margin-top: 0.6rem;
                    color: #666;
                    font-size: 1.4rem;
                    i{
                      font-size: 1.4rem;
                    }
                  }
                  .follow{
                    background-color: #0CAE6D;
                    color: #fff;
                    border-color: #0CAE6D;
                  }
                }
              }
              .time{
                padding: 1rem 0;
                font-size: 1.4rem;
                color: #999;
                span{
                  color: #666;
                }
              }
              .info{
                background-color: #F5F5F5;
                height: 8rem;
                display: flex;
              }
              .mileage,.speed,.timer{
                flex: 1;
                text-align: center;
                .data{
                  padding-top: 2.5rem;
                  span{
                    font-size: 1.2rem;
                    color: #999;
                  }
                }
                .tips{
                  display: block;
                  font-size: 1.2rem;
                  padding-top: 1rem;
                  color: #999;
                }
              }
            }
          }
        }
        .address{
          .map-box{
            height: 30rem;
            width: 100%;
          }
        }
        .members{
          .title{
            padding: 1rem 0;
            font-size: 1.4rem;
          }
          .item{
            margin-bottom: 1rem;
            display: flex;
            font-size: 1.4rem;
            .info{
              width: 65%;
              vertical-align: middle;
              img{
                width: 4rem;
                height: 4rem;
                border-radius: 50%;
                float: left;
                margin-right: 1rem;
              }
              .name{
                padding-top: 0.6rem;
                span{
                  background-color: #ff5f5f;
                  font-size: 1.2rem;
                  color: #fff;
                  padding: 1px 0.5rem;
                  margin-left: 0.5rem;
                  border-radius: 1rem;
                }
              }
              .times{
                font-size: 1.2rem;
                color: #666;
                padding-top: 1rem;
              }
            }
            .data{
              flex: 1;
              font-size: 1.2rem;
              color: #999;
              line-height: 1.6;
            }
            .action{
              flex: 0.5;
              text-align: center;
              i{
                color: #999;
                line-height: 5rem;
              }
              
            }
          }
        }
        .rank{
          .title{
            border-left: 4px solid #0cae6c;
            display: flex;
            margin:0.5rem 0;
            .text{
              flex: 1;
              padding-left: 0.5rem;
              font-size: 1.4rem;
            }
            .more{
              font-size: 1.2rem;
              color: #999;
            }
          }
          .rank-box{
            overflow: hidden;
            padding-top: 1rem;
            .item{
              margin-bottom: 1rem;
              vertical-align: middle;
              display: flex;
              .pic{
                flex: 1;
                padding-left: 0.2rem;
                .range{
                  display: inline-block;
                  height: 3rem;
                  line-height: 3rem;
                  vertical-align: middle;
                  font-size: 1.2rem;
                  width: 1.4rem;
                  text-align: center;
                  img{
                    vertical-align: middle;
                    height: 2.4rem;
                  }
                  margin-right: 0.5rem;
                }
                .user{
                  width: 3.5rem;
                  height: 3.5rem;
                  border-radius: 50%;
                  vertical-align: middle;
                }
              }
              .progress{
                flex: 2.5;
                padding-top: 0.2rem;
                overflow: hidden;
                .name{
                  font-size: 1.4rem;
                  padding: 0.2rem 0;
                }
              }
              .mailage{
                flex: 1;
                line-height: 4rem;
                font-size: 1.4rem;
                color: #999;
                text-align: center;
              }
            }
          }
        }
        .activity{
          .item{
            display: flex;
            margin-bottom: 1rem;
            padding-bottom: 1rem;
            .pic{
              width: 9rem;
              height: 9rem;
              line-height: 9rem;
              overflow: hidden;
              background-color: #eee;
              text-align: center;
              margin-right: 1rem;
              img{
                max-width: 9rem;
                max-height: 9rem;
                vertical-align: middle;
              }
            }
            .info{
              flex: 1;
              line-height: 1.4;
              font-size: 1.4rem;
              .title{
                padding-top: 1rem;
              }
              .status{
                margin: 0.5rem 0 0.8rem 0;
                span{
                  padding: 2px 1rem;
                  background-color: #0cae6c;
                  border-radius: 3px;
                  color: #fff;
                  font-size: 1rem;
                }
              }
              .over{
                span{
                  background-color: #C1C0C9;
                }
              }
              .time{
                color: #999;
                font-size: 1.2rem;
              }
            }
          }
        }
        .train{
          .item{
            display: flex;
            margin-bottom: 1rem;
            padding-bottom: 1rem;
            .pic{
              width: 9rem;
              height: 9rem;
              line-height: 9rem;
              overflow: hidden;
              background-color: #eee;
              text-align: center;
              margin-right: 1rem;
              img{
                max-width: 9rem;
                max-height: 9rem;
                vertical-align: middle;
              }
            }
            .info{
              flex: 1;
              line-height: 1.4;
              font-size: 1.4rem;
              .title{
                padding-top: 1rem;
              }
              .status{
                span{
                  display: inline-block;
                  padding: 0.2rem 1rem;
                  background-color: #0cae6c;
                  border-radius: 3px;
                  color: #fff;
                  font-size: 1rem;
                }
              }
              .over{
                span{
                  background-color: #C1C0C9;
                }
              }
              .data{
                color: #999;
                margin: 0.5rem 0;
              }
            }
          }
        }
      }
    }
  }
  .download{
    padding: 1rem;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 999;
    .download-cnt{
      display: flex;
      .pic{
        flex: 1;
        img{
          width: 5rem;
          float: left;
          margin-right: 1rem;
        }
        p{
          padding-top: 0.6rem;
          font-size: 1.4rem;
        }
        span{
          display: inline-block;
          padding-top: 1rem;
          font-size: 1rem;
          color: #666;
        }
      }
      .download-img{
        width: 10rem;
        text-align: right;
        padding-top: 0.5rem;
        img{
          width: 4rem;
        }
      }
    }
  }
}

</style>



